<!-- 橱窗管理 -->
<template>
  <PublicPage pageName="我的小店" :borderType="true" :showNav="true">
    <view class="selectGoods">
      <view class="linh-36 fz-12 px32 tipsBox" v-if="tipsShow">
        <view class="u-flex">
          <image src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/icon/deng_icon.png"
          style="width:24rpx;height:auto;margin-right:20rpx;"
          mode="widthFix" />
          长按商品可进行编辑或移出小店哦～
        </view>
        <view class="u-p-l-50" @click="_closeTips">
          <u-icon name="close" size="24rpx" color="#969799" />
        </view>
      </view>
      <SearchInput placeholder="搜索商品名" @searchFn="_searchList"  />
      <view style="height: 90rpx;">
        <u-tabs
          active-color="#E44435"
          height="90"
          inactive-color="#000000"
          font-size="28"
          name="label"
          bar-width="75"
          :list="tabsList"
          :is-scroll="false"
          :current="tabsIndex"
          @change="_changeCurrent"
        ></u-tabs>
      </view>
      
      <!-- 无数据-缺省頁 -->
      <DefaultPage
        tips="你还没有添加商品到小店， "
        tips2="快去添加吧～😊"
        type="3"
        :minusHeight="tipsShow ? 131 : 95"
        v-if="!goodsList.length && !getParams.loading"
      >
      </DefaultPage>


      <!-- 商品列表 -->
      <ScrollList
        v-else
        ref="scrollView"
        :minusHeight="tipsShow ? 131 : 95"
        @interrupt="interrupt"
        @scrolltolower="scrolltolower"
      >
        <template slot="content">
          <view
            v-for="(item, index) in goodsList"
            :key="index"
            class="u-p-24 goodsForBox"
            @longpress="_longpress(item,index)"
            @click.stop="navigateTo({url: `/pagesB/goods/goodsDetails?shopWindowId=${item.shopWindowId}`})"
          >
            <view class="goodsImage">
              <image
                :src="item.image[0].url"
                mode="aspectFill"
                style="width: 100%; height: 100%"
              />
              <!-- 商品失效 -->
              <view class="invalidation" v-if="item.isFailure">-- 已失效 --</view>
            </view>
            <view class="goodsMsg">
              <view class="ov2">{{ item.goodsName }}</view>
              <view class="justify-between items-center u-p-t-8">
                <view class="fz-10 viceColor u-flex" style="flex:1;" v-if="item.type === 2">
                  <view style="width: 32rpx; height: 32rpx; margin-right: 6rpx;border-radius: 50%;overflow: hidden;flex-shrink:0;">
                    <image
                      :src="item.avatar || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'"
                      mode="aspectFill"
                      style="width:100%;height:100%;"
                    />
                  </view>
                  {{ item.nickname }}
                </view>
                <view class="fz-10 employed" v-else>
                  自营
                </view>
                <view class="fz-10 themeFontColor"
                  >已售{{ item.saleCount }}</view
                >
              </view>
              <view style="flex:1;" class="flex-col justify-end">
                <!-- 最小最大售价相等 -->
                <view class="themeFontColor u-p-t-8" v-if="item.minSalePrice === item.maxSalePrice"><text class="fz-10">￥</text><text class="fw6">{{ item.minSalePrice || item.maxSalePrice }}</text></view>
                <!-- 售价区间 -->
                <view class="themeFontColor u-p-t-8" v-else><text class="fz-10">￥</text><text class="fw6">{{ item.minSalePrice }}~{{item.maxSalePrice}}</text></view>

                <!-- 非自营 -->
                <view v-if="item.type === 2">
                  <!-- 佣金相等 -->
                  <view class="fz-10 viceColor u-p-t-8" v-if="item.mixCommission === item.maxCommission">我的佣金<text class="themeFontColor">￥{{item.mixCommission||item.maxCommission}}</text>，比例：{{item.commissionRatio}}%</view>
                  <!-- 佣金区间 -->
                  <view class="fz-10 viceColor u-p-t-8" v-else>我的佣金<text class="themeFontColor">￥{{item.mixCommission}}~{{item.maxCommission}}</text>，比例：{{item.commissionRatio}}%</view>
                  <!-- 二级 - 佣金相等 -->
                  <view class="fz-10 viceColor u-p-t-8" v-if="item.mixSubordinateCommission && item.maxSubordinateCommission && item.mixSubordinateCommission === item.maxSubordinateCommission">
                    已设置分给下级佣金￥{{item.mixSubordinateCommission||item.maxSubordinateCommission}}</view>
                  <!-- 二级 - 佣金不相等 -->
                  <view class="fz-10 viceColor u-p-t-8" v-if="item.mixSubordinateCommission && item.maxSubordinateCommission && item.mixSubordinateCommission !== item.maxSubordinateCommission">
                    已设置分给下级佣金￥{{item.mixSubordinateCommission}}~{{item.maxSubordinateCommission}}</view>
                </view>
                <!-- 自营 -->
                <view v-if="item.type === 1">
                  <!-- 开启帮卖 下级佣金相等-->
                  <view class="fz-10 viceColor u-p-t-8" v-if="item.isHasHelpSell === 1 && item.mixSubordinateCommission === item.maxSubordinateCommission">
                    已设置分给下级佣金￥{{item.mixSubordinateCommission||item.maxSubordinateCommission}}，比例：{{item.commissionRatio}}%</view>
                  <!-- 开启帮卖 下级佣金不相等-->
                  <view class="fz-10 viceColor u-p-t-8" v-if="item.isHasHelpSell === 1 && item.mixSubordinateCommission !== item.maxSubordinateCommission">
                    已设置分给下级佣金￥{{item.mixSubordinateCommission}}~{{item.maxSubordinateCommission}}，比例：{{item.commissionRatio}}%</view>
                </view>
              </view>
            </view>
          </view>
        </template>
      </ScrollList>
      <view class="bmBtnBox">
        <view class="btn" @click="goToShow = true">添加商品</view>
        <view class="btn btn2" @click="navigateTo({url: '/pagesA/release/issueEdit?pageType=2'})">去带货</view>
      </view>




      <!-- 页面跳转 -->
      <u-popup v-model="goToShow" mode="bottom" border-radius="14" @maskClick="goToShow = false">
        <view>
          <view class="linh-50 tc fz-16" @click="goTo('/pagesA/libraryGoods/libraryGoods')">从商品库导入</view>
          <view class="linh-50 tc fz-16" @click="goTo('/pagesB/selectionCenter/index')">去选品中心</view>
          <view class="linh-50 tc fz-16 safe-bottom" style="border-top:solid 16rpx #F7F8FA;" @click="goToShow = false">取消</view>
        </view>
      </u-popup>
      <!-- 商品操作 -->
      <u-popup v-model="operateShow" mode="bottom" border-radius="14" @maskClick="operateShow = false">
        <view>
          <view class="linh-50 tc fz-16" @click="deleteShow = true">移出小店</view>
          <view class="linh-50 tc fz-16" @click="childShow = true" v-if="clickItem.isFailure !== 1 && clickItem.isHasHelpSell !== 0">修改佣金比例</view>
          <view class="linh-50 tc fz-16 safe-bottom" style="border-top:solid 16rpx #F7F8FA;" @click="operateShow = false">取消</view>
        </view>
      </u-popup>
      <SetChild :show="childShow" :item="clickItem" :type="2" @success="_changeCurrent(tabsIndex)" @close="childShow = false" />
      <u-modal v-model="deleteShow" :show-title="false" :show-confirm-button="false">
        <template slot="default">
          <view class="deleteBox">
            <view class="tc fz-16">确定要将此商品移出橱窗吗？</view>
            <view class="tc fz-16">移出后该商品不会被删除</view>
            <view class="goodsBox">
              <image class="goodsImage" :src="clickItem.image[0].url"/>
              <view class="ov2">{{clickItem.goodsName}}</view>
            </view>
          </view>
          <view class="btnBox">
            <view class="btn" @click="deleteShow = false">取消</view>
            <view class="btn" @click="_configDelete">确定</view>
          </view>
        </template>
      </u-modal>
    </view>
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue";
import ScrollList from "@/components/scrollList/index.vue";
import DefaultPage from "@/components/defaultPage/index.vue";
import SearchInput from "@/components/searchInput/index.vue";
import SetChild from "./setChild.vue";
import goods from "@/api/goods.js";
export default {
  name: "selectGoods",
  components: {
    PublicPage,
    DefaultPage,
    ScrollList,
    SearchInput,
    SetChild
  },
  data() {
    return {
      tipsShow: true,
      tabsList: [
        {label: '全部'},
        {label: '我发布的'},
        {label: '我帮卖的'}
      ],
      tabsIndex: 0,
      getParams: {
        currentPage: 1,
        pageSize: 10,
        goodsName: '',
        type: 1,
        finish: false, // 是否还有更多
        loading: true, // 是否在加载中
      },
      goodsList: [],
      goToShow: false,
      operateShow: false,
      childShow: false,
      clickItem: {},
      clickIndex: 0,
      deleteShow: false,
    };
  },
  onShow(){
    this._getGoodsSquare();
    this.tipsShow = uni.getStorageSync('shopWindowTips') ? false : true
  },
  methods: {
    // 获取列表
    async _getGoodsSquare() {
      this.getParams.loading = true
      const { data } = await goods.getShopWindow(this.getParams);

      data.records.forEach((v) => {
        v.image = JSON.parse(v.image);
      });
      if (this.getParams.currentPage === 1) {
        this.goodsList = data.records;
      } else {
        this.goodsList.push(...data.records);
      }
      this.getParams.loading = false
      this.getParams.finish = data.records.length < this.getParams.pageSize // 返回长度小于请求长度
    },
    async _changeCurrent(val){
      this.tabsIndex = val
      this.getParams.type = (val + 1)
      this.getParams.currentPage = 1;
      this.getParams.finish = false;
      await this._getGoodsSquare();
      this.$refs.scrollView.loadFinish(this.getParams.finish ? 3 : 0); // 加载完成，是否还有更多
      this.operateShow = false
    },
    // 加载更多
    async scrolltolower() {
      this.getParams.currentPage += 1;
      await this._getGoodsSquare();
      this.$refs.scrollView.loadFinish(this.getParams.finish ? 3 : 0); // 加载完成，是否还有更多
    },
    // 刷新
    async interrupt() {
      this.getParams.currentPage = 1;
      this.getParams.finish = false;
      await this._getGoodsSquare();
      setTimeout(() => {
        this.$refs.scrollView.refreshFinish(); // 刷新完成
      }, 500);
    },
    // 搜索列表
    _searchList(val){
      this.getParams.goodsName = val
      this.getParams.currentPage = 1;
      this.getParams.finish = false;
      this._getGoodsSquare()
    },
    // 打开跳转页面弹窗
    goTo(url){
      this.navigateTo({url});
      this.goToShow = false
    },
    // 长按商品
    _longpress(item,index){
      this.operateShow = true
      this.clickItem = item
      this.clickIndex = index
    },
    // 删除商品
    _configDelete(){
      let params = {
        spuId: this.clickItem.spuId,
        superiorShopWindowId: this.clickItem.shopWindowId, // 橱窗id
        isShopWindow: 1, //  0.添加橱窗 1.移除橱窗
      };
      goods.updateShopWindow(params).then((res) => {
        this.goodsList.splice(this.clickIndex,1)
        uni.showToast({
          title: "已移出橱窗",
          icon: "none",
        });
        this.deleteShow = false
        this.operateShow = false

        if(!this.goodsList.length && !this.getParams.finish){ // 被删完了，但是还有其他数据，直接刷新
          this._changeCurrent(this.tabsIndex)
        }
      })
    },
    // 关闭提示
    _closeTips(){
      this.tipsShow = false
      uni.setStorageSync('shopWindowTips','关闭提示')
    }
  }
};
</script>
<style lang="scss" scoped>
.selectGoods {
  background: #F7F8FA;
  height: calc(100% - 100rpx);
  .bmBtnBox{
    position: fixed;
    z-index: 999;
    height: 100rpx;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #FFF;
    left: 0;
    bottom: 0;
    box-shadow: 0 -1px 1px #EEE;
    box-sizing: content-box;
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .btn{
      width: 50%;
      line-height: 100rpx;
      text-align: center;
    }
    .btn2{
      background: #E44435;
      color: #FFF;
    }
  }
  .tipsBox{
    background: #FFFBE8;
    color:#ED6A0C;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .goodsForBox {
    background-color: #fff;
    display: flex;
    .goodsImage {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      overflow: hidden;
      margin-right: 24rpx;
      box-shadow: 0 0 0px 1px #eee;
      position: relative;
      .invalidation{
        width: 100%;
        height: 100%;
        line-height: 200rpx;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba($color: #000000, $alpha: 0.6);
        color: #FFF;
        text-align: center;
        font-size: 24rpx;
      }
    }
    .goodsMsg {
      flex: 1;
      display: flex;
      flex-direction: column;
      .ov2 {
        @include bov(2);
      }
      .employed{
        color: #e44435;
        border: solid 1px #e44435;
        border-radius: 8rpx;
        padding: 2rpx 10rpx;
      }
    }
  }
  .deleteBox{
    padding: 48rpx 32rpx;
    .goodsBox{
      background: #F7F8FA;
      border-radius: 12rpx;
      display: flex;
      align-items: center;
      margin-top: 48rpx;
      .goodsImage{
        width: 96rpx;
        height: 96rpx;
        flex-shrink: 0;
        border-radius: 6rpx;
        margin-right: 20rpx;
      }
      .ov2{
        flex: 1;
        font-size: 24rpx;
        @include bov(2)
      }
    }
  }
  .btnBox {
    display: flex;
    line-height: 96rpx;
    font-size: 32rpx;
    .btn {
      width: 50%;
      text-align: center;
      box-shadow: 1px -1px 1px #ebedf0;
      color: #969799;
      font-weight: 500;
    }
    .btn + .btn {
      color: #e44435;
    }
  }
}
</style>